@page "/circular-gauge/pointer-custom"

@using Syncfusion.Blazor.CircularGauge

@inherits SampleBaseComponent;
	
<div class="control-section">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#01aebe"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Width="0.01" Height="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Radius="100%" Value="80" Type="PointerType.Marker" MarkerShape="GaugeShape.InvertedTriangle" MarkerWidth="15" MarkerHeight="15" Color="rgb(0,171,169)"/>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="20%" Content="Inverted Triangle">
                                        <CircularGaugeAnnotationTextStyle Color="#757575" FontFamily="Roboto" Size="14px"/>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#ff5985">
                                </CircularGaugeAxisLineStyle>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="66" Radius="90%" Type="PointerType.RangeBar" PointerWidth="10" Color="#ff5985">
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="28%" Content="Range Bar">
                                        <CircularGaugeAnnotationTextStyle Color="#757575" FontFamily="Roboto" Size="14px"/>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#1E7145"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="70" Radius="100%" Type="PointerType.Marker" MarkerShape="GaugeShape.Triangle" MarkerWidth="15" MarkerHeight="15" Color="#1E7145">
                                        <CircularGaugePointerBorder Width="1" Color="#1E7145"/>
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="20%" Content="Triangle">
                                        <CircularGaugeAnnotationTextStyle Color="#757575" FontFamily="Roboto" Size="14px"/>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#9250e6"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="@NeedlePointer" Radius="100%" Color="#923C99" PointerWidth="6">
                                        <CircularGaugeCap Radius="0.01"/>
                                        <CircularGaugeNeedleTail Length="4%" Color="#923C99"/>
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="20%" Content="Needle">
                                        <CircularGaugeAnnotationTextStyle Color="#757575" FontFamily="Roboto" Size="14px"/>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="3" Color="#e3a21a"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="80" Radius="80%" MarkerWidth="5" MarkerHeight="5" Color="#e3a21a" PointerWidth="10">
                                        <CircularGaugeCap Radius="8" Color="White">
                                            <CircularGaugeCapBorder Color="#e3a21a" Width="1"/>
                                        </CircularGaugeCap>
                                        <CircularGaugeNeedleTail Length="20%" Color="#e3a21a"/>
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                    <CircularGaugePointer Value="40" Radius="60%" MarkerWidth="5" MarkerHeight="5" Color="#ffb133" PointerWidth="10">
                                        <CircularGaugeCap Radius="8" Color="White">
                                            <CircularGaugeCapBorder Color="#ffb133" Width="1"/>
                                        </CircularGaugeCap>
                                        <CircularGaugeNeedleTail Length="20%" Color="#e3a21a"/>
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="25%" Content="Multiple Needle">
                                        <CircularGaugeAnnotationTextStyle Color="#757575" FontFamily="Roboto" Size="14px"/>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
                <div class="col-sm-4">
                    <SfCircularGauge Height="250px" CenterY="40%">
                        <CircularGaugeAxes>
                            <CircularGaugeAxis StartAngle="270" EndAngle="90" Radius="90%" Minimum="0" Maximum="100">
                                <CircularGaugeAxisLineStyle Width="0.01"/>
                                <CircularGaugeAxisLabelStyle Position="Position.Outside">
                                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                </CircularGaugeAxisLabelStyle>
                                <CircularGaugeAxisMajorTicks Width="1" Height="0.01" Interval="100"/>
                                <CircularGaugeAxisMinorTicks Height="0.01" Width="0.01"/>
                                <CircularGaugePointers>
                                    <CircularGaugePointer Value="@LiveUpdatePointer" Radius="100%" Color="#067bc2" PointerWidth="6">
                                        <CircularGaugeCap Radius="0.01"/>
                                        <CircularGaugeNeedleTail Length="4%" Color="#067bc2"/>
                                        <CircularGaugePointerAnimation Enable="true" Duration="1000"/>
                                    </CircularGaugePointer>
                                    <CircularGaugePointer Value="@LiveUpdatePointer" Radius="100%" Type="PointerType.RangeBar" Color="#067bc2" PointerWidth="5">
                                        <CircularGaugePointerAnimation Enable="true" Duration="1800"/>
                                    </CircularGaugePointer>
                                </CircularGaugePointers>
                                <CircularGaugeAnnotations>
                                    <CircularGaugeAnnotation Angle="180" ZIndex="1" Radius="20%" Content="Live Update">
                                        <CircularGaugeAnnotationTextStyle Color="#757575" FontFamily="Roboto" Size="14px"/>
                                    </CircularGaugeAnnotation>
                                </CircularGaugeAnnotations>
                            </CircularGaugeAxis>
                        </CircularGaugeAxes>
                    </SfCircularGauge>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private Double LiveUpdatePointer = 40;
    private Double NeedlePointer = 80;
    Random Random = new Random();
}